<template>
  <div class="pre-view" :style="setPageStyle()" v-if="show">
    <div class="com-list" v-for="(comp, index) of renderComponentList" :key="comp.id"
      :style="{ ...setComppos(comp.attr, index) }">
      <component :is="comp.chartConfig.chartKey" :chartConfig="comp" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'll-preview'
}
</script>
<script setup>
import { computed } from "vue";
import { colorCustomMerge, getSessionStorage } from "@/utils";
import { useComInstall } from "./hooks/useComInstall.hook";

let storageList = computed(() => getSessionStorage("CHART_STORAGE_LIST"));
let renderComponentList = computed(() => {
  return storageList.value.renderComponentList;
});
let editCanvasConfig = computed(() => {
  return storageList.value.editCanvasConfig;
});
let unit = computed(() => storageList.value.editCanvasConfig.unit);
function setComppos(attr, index) {
  return {
    top: attr.y + unit.value,
    left: attr.x + unit.value,
    zIndex: attr.zIndex,
    width: attr.w + unit.value,
    height: attr.h + unit.value,
  };
}
function setPageStyle() {
  let { width, height, background, backgroundImage, selectColor } =
    editCanvasConfig.value;
  let bgc = selectColor
    ? { background }
    : { backgroundImage: `url(${backgroundImage})`, backgroundSize: "cover" };
  return {
    width: width + unit.value,
    height: height + unit.value,
    ...bgc,
  };
}

// 配置项
// const themeColor = computed(() => {
//   const colorCustomMergeData = colorCustomMerge(
//     editCanvasConfig.value.chartCustomThemeColorInfo
//   );
//   return colorCustomMergeData[editCanvasConfig.value.chartThemeColor];
// });

const { show } = useComInstall(storageList.value);

/**
 * 计算组件位置
 */
</script>
<style scoped lang="scss">
.pre-view {
  position: relative;

  .com-list {
    position: absolute;
  }
}
</style>
